<template>
  <a-card :bordered="false">
    <a-row align="bottom" :gutter="[{ lg: 16 }, 24]" justify="center" type="flex">
      <a-col :lg="{ span: 5 }" :sm="{ span: 24 }">
        全国补货量
        <a-upload-dragger
          accept=".xls,.xlsx"
          action="http://10.114.101.232:8089/fileservice/file/upload"
          :before-upload="beforeUpload"
          class="avatar-uploader"
          list-type="picture-card"
          name="files"
          :show-upload-list="false"
          @change="handleChange"
        >
          <a-popover>
            <template slot="content">
              <p>{{ all.filename || '请导入excel文件' }}</p>
            </template>
            <img v-if="all.imageUrl" alt="avatar" :src="all.imageUrl" />
            <div v-else>
              <a-icon :type="all.loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">
                导入
              </div>
            </div>
          </a-popover>
        </a-upload-dragger>
      </a-col>
      <a-col :lg="{ span: 5 }" :sm="{ span: 24 }">
        当前库存
        <a-upload-dragger
          accept=".xls,.xlsx"
          action="http://10.114.101.232:8089/fileservice/file/upload"
          :before-upload="beforeUpload"
          class="avatar-uploader"
          list-type="picture-card"
          name="files"
          :show-upload-list="false"
          @change="inventory"
        >
          <a-popover>
            <template slot="content">
              <p>{{ now.filename || '请导入excel文件' }}</p>
            </template>
            <img v-if="now.imageUrl" alt="avatar" :src="now.imageUrl" />
            <div v-else>
              <a-icon :type="now.loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">
                导入
              </div>
            </div>
          </a-popover>
        </a-upload-dragger>
      </a-col>
      <a-col :lg="{ span: 3 }" :sm="{ span: 24 }">
        历史订单
        <a-upload-dragger
          accept=".xls,.xlsx"
          action="http://10.114.101.232:8089/fileservice/file/upload"
          :before-upload="beforeUpload"
          class="avatar-uploader"
          list-type="picture-card"
          name="files"
          :show-upload-list="false"
          @change="history"
        >
          <a-popover>
            <template slot="content">
              <p>{{ his.filename || '请导入excel文件' }}</p>
            </template>
            <img v-if="his.imageUrl" alt="avatar" :src="his.imageUrl" />
            <div v-else>
              <a-icon :type="his.loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">
                导入
              </div>
            </div>
          </a-popover>
        </a-upload-dragger>
      </a-col>
    </a-row>
    <a-row align="bottom" :gutter="[{ lg: 16 }, 24]" justify="center" type="flex">
      <a-col :lg="{ span: 5 }" :sm="{ span: 24 }">
        仓库代码变化
        <a-upload-dragger
          accept=".xls,.xlsx"
          action="http://10.114.101.232:8089/fileservice/file/upload"
          :before-upload="beforeUpload"
          class="avatar-uploader"
          list-type="picture-card"
          name="files"
          :show-upload-list="false"
          @change="storecode"
        >
          <a-popover>
            <template slot="content">
              <p>{{ store.filename || '请导入excel文件' }}</p>
            </template>
            <img v-if="store.imageUrl" alt="avatar" :src="store.imageUrl" />
            <div v-else>
              <a-icon :type="store.loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">
                导入配置项
              </div>
            </div>
          </a-popover>
        </a-upload-dragger>
      </a-col>
      <a-col :lg="{ span: 5 }" :sm="{ span: 24 }">
        仓库目的地关系
        <a-upload-dragger
          accept=".xls,.xlsx"
          action="http://10.114.101.232:8089/fileservice/file/upload"
          :before-upload="beforeUpload"
          class="avatar-uploader"
          list-type="picture-card"
          name="files"
          :show-upload-list="false"
          @change="destination"
        >
          <a-popover>
            <template slot="content">
              <p>{{ des.filename || '请导入excel文件' }}</p>
            </template>
            <img v-if="des.imageUrl" alt="avatar" :src="des.imageUrl" />
            <div v-else>
              <a-icon :type="des.loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">
                导入配置项
              </div>
            </div>
          </a-popover>
        </a-upload-dragger>
      </a-col>
      <a-col :lg="{ span: 3 }" :sm="{ span: 24 }">
        物料代码替代关系
        <a-upload-dragger
          accept=".xls,.xlsx"
          action="http://10.114.101.232:8089/fileservice/file/upload"
          :before-upload="beforeUpload"
          class="avatar-uploader"
          list-type="picture-card"
          name="files"
          :show-upload-list="false"
          @change="materialscode"
        >
          <a-popover>
            <template slot="content">
              <p>{{ materials.filename || '请导入excel文件' }}</p>
            </template>
            <img v-if="materials.imageUrl" alt="avatar" :src="materials.imageUrl" />
            <div v-else>
              <a-icon :type="materials.loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">
                导入配置项
              </div>
            </div>
          </a-popover>
        </a-upload-dragger>
      </a-col>
    </a-row>
    <a-row align="bottom" :gutter="[{ lg: 44 }, 24]" justify="center" type="flex">
      <a-col :lg="{ span: 2 }" :sm="{ span: 24 }">
        <div>
          <a-button :loading="uploading" type="primary" @click="run">
            Run
          </a-button>
        </div>
      </a-col>
    </a-row>
    <div v-if="isProShow">
      <a-spin :spinning="spinning" tip="预测中">
        <a-row :gutter="[16, 32]" justify="space-around" type="flex">
          <a-col :lg="24" :xl="12">
            <a-card class="trans-text" title="运行结果">
              1<!-- {{ result[item.key] == '' ? '翻译结果为空...' : result[item.key] }} -->
            </a-card>
          </a-col>
        </a-row>
      </a-spin>
    </div>
    <a-row v-else :gutter="[16, 32]" justify="space-around" type="flex">
      <a-col :span="24">
        <a-empty
          image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
          :image-style="{
            height: '60px'
          }"
        >
          <span slot="description">
            你还没有创建预测产品
          </span>
        </a-empty>
      </a-col>
    </a-row>
  </a-card>
</template>
<script>
import excel from '@/assets/excel.png'
import reqwest from 'reqwest'
export default {
  data() {
    return {
      fileList: [],
      all: { loading: false, imageUrl: '', filename: '', info: '', sta: false },
      now: { loading: false, imageUrl: '', filename: '', info: '', sta: false },
      his: { loading: false, imageUrl: '', filename: '', info: '', sta: false },
      store: { loading: false, imageUrl: '', filename: '', info: '', sta: false },
      des: { loading: false, imageUrl: '', filename: '', info: '', sta: false },
      materials: { loading: false, imageUrl: '', filename: '', info: '', sta: false },
      uploading: false, // 上传状态
      isProShow: false, // 产品是否为空
      spinning: false // 加载状态
    }
  },
  methods: {
    // 全国补货量
    handleChange(info) {
      this.all.imageUrl = excel
      this.all.filename = info.file.name
      this.all.file = info.file
      this.all.sta = true
      if (info.file.status === 'uploading') {
        this.all.loading = true
        return
      }
      if (info.file.status === 'done') {
        this.all.loading = false
      }
      // this.imageUrl = logo;
    },
    // 当前库存
    inventory(info) {
      this.now.imageUrl = excel
      this.now.filename = info.file.name
      this.now.file = info.file
      this.now.sta = true
      if (info.file.status === 'uploading') {
        this.now.loading = true
        return
      }
      if (info.file.status === 'done') {
        this.now.imageUrl = excel
        this.now.loading = false
        this.now.sta = true
        this.now.filename = info.file.name
        this.now.file = info
      }
      // this.imageUrl = logo;
    },
    // 历史订单
    history(info) {
      this.his.imageUrl = excel
      this.his.filename = info.file.name
      this.his.file = info.file
      this.his.sta = true
      if (info.file.status === 'uploading') {
        this.his.loading = true
        return
      }
      if (info.file.status === 'done') {
        this.his.imageUrl = excel
        this.his.loading = false
        this.his.sta = true
        this.his.filename = info.file.name
        this.his.file = info
      }
      // this.imageUrl = logo;
    },
    // 仓库代码变化
    storecode(info) {
      this.store.imageUrl = excel
      this.store.filename = info.file.name
      this.store.file = info.file
      this.store.sta = true
      if (info.file.status === 'uploading') {
        this.store.loading = true
        return
      }
      if (info.file.status === 'done') {
        this.store.imageUrl = excel
        this.store.loading = false
        this.store.sta = true
        this.store.filename = info.file.name
        this.store.file = info
      }
      // this.imageUrl = logo;
    },
    // 仓库目的地关系
    destination(info) {
      this.des.imageUrl = excel
      this.des.filename = info.file.name
      this.des.file = info.file
      this.des.sta = true
      if (info.file.status === 'uploading') {
        this.des.loading = true
        return
      }
      if (info.file.status === 'done') {
        this.des.imageUrl = excel
        this.des.loading = false
        this.des.sta = true
        this.des.filename = info.file.name
        this.des.file = info
      }
      // this.imageUrl = logo;
    },
    // 物料代码替代关系
    materialscode(info) {
      this.materials.imageUrl = excel
      this.materials.filename = info.file.name
      this.materials.file = info.file
      this.materials.sta = true
      if (info.file.status === 'uploading') {
        this.materials.loading = true
        return
      }
      if (info.file.status === 'done') {
        this.materials.imageUrl = excel
        this.materials.loading = false
        this.materials.sta = true
        this.materials.filename = info.file.name
        this.materials.file = info
      }
      // this.imageUrl = logo;
    },
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
        file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (!isJpgOrPng) {
        this.$message.error('You can only upload excel file!')
      }
      // const isLt2M = file.size / 1024 / 1024 < 2
      // if (!isLt2M) {
      //   this.$message.error('Image must smaller than 2MB!')
      // }
      return false
    },
    clear() {
      this.result = ''
    },
    onFocus() {},
    run() {
      if (this.his.sta && this.all.sta && this.now.sta && this.store.sta && this.des.sta && this.materials.sta) {
        this.isProShow = true
        const List = []
        List.push(this.all.file, this.now.file, this.his.file, this.store.file, this.des.file, this.materials.file)
        this.fileList = List
        const formData = new FormData()
        this.fileList.forEach(file => {
          formData.append('files', file)
        })
        this.uploading = true
        console.log(formData)
        // You can use any AJAX library you like
        reqwest({
          url: 'http://10.114.101.232:8089/fileservice/file/upload',
          method: 'post',
          Headers: {
            'Content-Type': 'multipart/form-data;boundary=1'
          },
          processData: false,
          data: formData,
          success: () => {
            this.fileList = []
            this.uploading = false
            this.$message.success('upload successfully')
          },
          error: () => {
            this.uploading = false
            this.$message.error('upload failed')
          }
        })
        console.log(this.fileList)
      } else {
        this.$message.error('请导入全部excel文件')
      }
    }
  }
}
</script>
<style lang="scss">
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.avatar-uploader img {
  width: 110px;
  height: 100px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
